<template>
<!--积分兑换详情-->
  <div class="jifenduihuandetail">
    <wv-panel >
      <wv-media-box :thumb="thumb" title="首都机场贵宾通道" description="×2" ></wv-media-box>
    </wv-panel>
    <div class="divider"></div>
    <ul class="address">
      <li><img src="../../../assets/clock.png" alt="" width="15">6:00-22:00</li>
      <li><span><img src="../../../assets/address.png" alt="" width="15"></span>
        <span>T1航站楼4层自动扶梯左侧T1航站楼4层自动扶梯左侧T1航站
        楼4层自动扶梯左侧</span>
      </li>
      <li><span v-show="yuyue!=='预约'">有效期：2018/9/28-2018/10/28</span><span v-show="yuyue=='预约'">预约状态：预约中</span></li>
    </ul>
    <div class="contents">
      <div v-show="yuyue!=='预约'">
        <p class="title">验证码</p>
        <ul class="img">
          <li>
            <img src="../../../assets/erweima.png" alt="" width="120">
            <span v-show="isuse">已使用</span>
          </li>
          <li>2235  4575  6817</li>
        </ul>
        <p  class="title">使用说明</p>
        <ul class="des">
          <li>1.使用前请向工作人员出示此码。</li>
        </ul>
      </div>
      <div v-show="yuyue=='预约'">
        <p  class="title">使用说明</p>
        <ul class="des">
          <li>1.使用前请向工作人员出示此码。</li>
        </ul>
        <div class="divider"></div>
        <wv-group class="mymsg" >
          <wv-cell title="航班日期" value="2018/12/12"></wv-cell>
          <wv-cell title="起飞时间" value="16：15"></wv-cell>
          <wv-cell title="始发地" value="中国-甘肃-兰州"></wv-cell>
          <wv-cell title="到达地" value="中国-北京"></wv-cell>
          <wv-cell title="姓名" value="罗杰"></wv-cell>
          <wv-cell title="证件类型" value="身份证"></wv-cell>
          <wv-cell title="证件号码" value="112157196810140121"></wv-cell>
          <wv-cell title="电话" value="18535641854"></wv-cell>
        </wv-group>
      </div>
    </div>
    <div class="divider"></div>
    <ul class="msg">
      <li>订单编号：123397896646548653</li>
      <li>订单时间：2012/8/20  12:38:20</li>
      <li>支付时间：2012/8/20  12:39:29</li>
      <li>支付方式：积分兑换</li>
      <li>支付积分：200积分</li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'jifendingdandetail',
        props: {},
        data() {
            return {
              thumb:require('../../../assets/guibin.png'),
              yuyue:'无需预约',
              isuse:false,
            };
        },
        methods: {},
        created() {

        },
        components: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .divider{
    background-color: #eee;
    height: 10px;
  }
  .address{
    background-color: #fff;
    padding:0 10px 10px;
    text-align: left;
    li{
      border-bottom: 1px solid #eee;
      img{
        margin-right: 5px;
        vertical-align: text-bottom;

      }
    }
    li:nth-child(2){

      display: flex;
      padding: 10px 0 ;
      span:first-child{
        flex: 0 20px;
        img{
          vertical-align: top;
          padding-top: 5px;
        }
      }
      span:last-child{
        line-height: 22px;
      }
    }
    li:last-child{
      border-bottom: none;
    }
  }
  .contents{

    text-align: left;color: #111;
    .title{
      font-size: 18px;
      padding:0 10px ;
    }
    .img{
      text-align: center;
      font-size: 13px;
      margin-bottom: 15px;
      li:first-child{
        margin-bottom: 10px;
        position: relative;
        span{
          height: 75px;
          width: 75px;
          line-height: 75px;
          text-align: center;
          border:1px solid #ddd;
          border-radius: 50%;
          color: #999;
          position: absolute;
          top: -30px;
          right: 22.5%;
          background-color: rgba(255,255,255,0.5);
        }
        img{
          border:1px solid #ddd;
        }
      }

    }
    .des{
      color: #666;
      padding:0 10px 10px;
    }
  }
  .msg{
    padding: 10px;
    font-size: 13px;
    color: #666;
    line-height: 25px;
    text-align: left;
  }
</style>
